<template>
  <div class="regist">
    <el-drawer :model-value="drawer" direction="rtl" append-to-body :before-close="handleClose">
      <template #header>
        <h2>注册</h2>
      </template>
      <template #default>
        <div class="container">
          <div class="avatar-c">
            <el-upload class="avatar-uploader" :action="uploadUrl" name="files" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="form.image" :src="base + form.image" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </div>
          <el-form :model="form" :rules="rules" ref="ruleFormRef">
            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="用户名">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.phone" placeholder="手机">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.email" placeholder="邮箱">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleClose">取消</el-button>
              <el-button type="primary" @click="submitForm">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
  
<script setup lang="ts">
import { ref } from "vue";
import type { FormInstance, FormRules } from 'element-plus'
import { registApi } from "@/service/api";
import { base, uploadUrl } from '@/service/config';





defineProps({
  drawer: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["close"]);

const ruleFormRef = ref()
const form = reactive({
  username: "",
  password: "",
  phone: "",
  email: "",
  image: ''
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名、手机号或邮箱', trigger: 'blur' },
    { min: 3, message: '最小长度大于3字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '最小长度大于6字符', trigger: 'blur' },
  ],

})
const submitForm = async () => {
  (ruleFormRef.value as FormInstance).validate(valid => {
    if (valid) {
      regist()
    } else {
      console.log('验证未通过');

    }
  })

}
const handleAvatarSuccess = (res: Response) => {
  if (res.error) return ElMessage.error('头像上传失败');
  ElMessage.success('头像上传成功');
  form.image = res.data.url;
};

const regist = async () => {
  const { data } = await registApi({ ...form, role: 2 });
  if (data.value.code !== 201) return ElMessage.error(data.value.msg);
  if (data.value?.errors && data.value.errors.length > 0) {
    const errorMsg = data.value.errors.map((item: any) => item.msg).toString()
    return ElMessage.error(errorMsg);
  }
  ElMessage.success(data.value.msg);
  handleClose()
}

const handleClose = () => {
  resetform()
  emit("close");
};
const resetform = () => {
  form.email = ''
  form.username = ''
  form.password = ''
  form.phone = ''
  form.image = ''
}
</script>
  
<style scoped lang="scss">
.container {
  height: 100%;

  .avatar-c {
    text-align: center;
    margin-bottom: 40px;
  }
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
  